<template>
    <div>
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="2"><GoBack></GoBack></el-col>
                    <el-col :span="20"><label>{{ $t('regedit.text') }}</label></el-col>
                    <el-col :span="2"><SwitchLang @switchLang="switchLang"></SwitchLang></el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-form ref="form" :model="form" :rules="rules" label-width="130px" label-suffix="：">
                    <el-row>
                        <el-col :span="8" :offset="4">
                            <el-form-item :label="$t('regedit.username')" prop="username">
                                <el-input v-model="form.username" clearable :placeholder="$t('regedit.username_ph')"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item :label="$t('regedit.nickname')" prop="nickname">
                                <el-input v-model="form.nickname" clearable :placeholder="$t('regedit.nickname_ph')"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4" :offset="4">
                            <el-form-item :label="$t('regedit.lastname')" prop="lastname">
                                <el-input v-model="form.lastname" clearable :placeholder="$t('regedit.lastname_ph')"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item :label="$t('regedit.firstname')" prop="firstname">
                                <el-input v-model="form.firstname" clearable :placeholder="$t('regedit.firstname_ph')"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item :label="$t('regedit.gender')" style="text-align: left;">
                                <el-radio-group class="width-100" v-model="form.gender">
                                    <el-row type="flex" justify="space-between">
                                        <el-col :span="10"><el-radio class="width-100" border :label="1">{{ $t('regedit.male') }}</el-radio></el-col>
                                        <el-col :span="10"><el-radio class="width-100" border :label="0">{{ $t('regedit.female') }}</el-radio></el-col>
                                    </el-row>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8" :offset="4">
                            <el-form-item :label="$t('regedit.password')" prop="password">
                                <el-input v-model="form.password" clearable show-password :placeholder="$t('regedit.password_ph')"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item :label="$t('regedit.confirm_password')" prop="confirmPassword">
                                <el-input v-model="form.confirmPassword" clearable show-password :placeholder="$t('regedit.confirm_password_ph')"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8" :offset="4">
                            <el-form-item :label="$t('regedit.email')" prop="email">
                                <el-input v-model="form.email" clearable :placeholder="$t('regedit.email_ph')"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item :label="$t('regedit.phone')" prop="phone">
                                <el-input v-model="form.phone" clearable :placeholder="$t('regedit.phone_ph')"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8" :offset="4">
                            <el-form-item :label="$t('regedit.captcha')" prop="captchaBean.captcha">
                                <el-row type="flex" justify="space-between">
                                    <el-col :span="14">
                                        <el-input v-model="form.captchaBean.captcha" clearable :placeholder="$t('regedit.captcha_ph')"></el-input>
                                    </el-col>
                                    <el-col :span="9">
                                        <EmailCaptchaButton :btnLabel="codeBtnText" :btnEmail="form.email" @sendCaptchaSuccess="sendCaptchaSuccess"></EmailCaptchaButton>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item>
                                <el-button class="width-100" type="primary" :loading="load" @click="regedit()">{{ $t('regedit.button') }}</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import SwitchLang from '@/components/SwitchLang';
import GoBack from '@/components/GoBack';
import EmailCaptchaButton from '@/components/EmailCaptchaButton';
import {usernameValid, passwordValid, phoneValid, emailValid, lengthvalid_0_16, authCodeValid} from '@/validate/regedit'
import { doRegedit } from '@/api/regedit';

export default {
    name: 'Regedit',
    components:{
        SwitchLang,
        GoBack,
        EmailCaptchaButton
    },
    data() {
        return {
            load: false,
            codeBtnText: this.$t('regedit.send_email_captcha'),
            form:{
                username: "",
                password: "",
                confirmPassword: "",
                nickname: "",
                lastname: "",
                firstname: "",
                gender: null,
                phone: "",
                email: "",
                captchaBean: {
                    captcha: "",
                    sessionId: ""
                }
            },
            rules:{
                username: usernameValid,
                password: passwordValid,
                confirmPassword: [
                    {
                        required: true,
                        trigger: ['blur', 'change'],
                        validator: (rule, value, callback)=>{
                            if(!value) {
                                callback(new Error(this.$t('regedit.password_valid_fail')));
                            }else if(value !== this.form.password) {
                                callback(new Error(this.$t('regedit.repassword_valid_fail')));
                            }else{
                                callback();
                            }
                        }
                    }
                ],
                nickname: lengthvalid_0_16,
                lastname: lengthvalid_0_16,
                firstname: lengthvalid_0_16,
                phone: phoneValid,
                email: emailValid,
                captchaBean:{
                    captcha: authCodeValid
                } 
            }
        }
    },
    computed: {},
    methods:{
        regedit(){// 注册
            this.load = true;
            this.$refs.form.validate(valid=>{
                if(valid){//验证通过的代码
                    doRegedit(this.form).then(res=>{
                        const{code, msg} = res;
                        if(code===200){
                            this.$message.success(this.$t('regedit.regedit_success'));
                            this.$router.replace('/login')//注册成功
                        }else{
                            this.$message.error(msg);
                            this.load = false;
                        }
                    });
                }else{//验证不通过的代码
                    this.load = false;
                }
            });
        },
        switchLang(lang){//SwitchLang子组件向父组件传值，修改按钮上的语言
            // console.log(lang);
            this.$refs.form.clearValidate();//清除表单上的校验
            this.codeBtnText = this.$t('regedit.send_email_captcha');
        },
        sendCaptchaSuccess(sessionId){
            console.log(`发送验证码到指定邮箱成功${sessionId}`);
            this.form.captchaBean.sessionId = sessionId;
        }
    },
    created(){}
}

</script>
<style scoped>

</style>